<% title "Trending Repositories - Libraries.io" %>
<h1><i class="fa fa-line-chart"></i> Trending Repositories</h1>

<div class="row">
  <div class="col-sm-8">
    <%= render @repos %>
    <%= will_paginate @repos, page_links: false %>
  </div>
  <div class="col-sm-4">
    <h3>
      <strong>
        How does this work?
      </strong>
    </h3>
    <p>
      This page applies a simplified version of the <%= link_to 'hacker news algorithm', 'https://news.ycombinator.com/item?id=1781013' %> to open source repositories created within the past 7 days, where stars are used instead of upvotes.
    </p>
    <p>
      It highlights new and interesting repositories across the web, updated in real time using the <%= link_to 'GitHub firehose', 'https://developer.github.com/v3/activity/events/#list-public-events' %>.
    </p>
    <p>
      <%= link_to 'Browse the newest repositories here', new_repos_path %>
    </p>
    <div class='row'>
      <% if @languages.any? %>
        <div class='col-md-12 facets'>
          <h4>Filter by language</h4>
          <ul class='filter'>
            <% @languages.each do |language| %>
              <li class='<%= 'active' if language[0].downcase == params[:language].try(:downcase) %>'>
                <% if language[0].downcase == params[:language].try(:downcase) %>
                  <%= link_to format_language(language[0]), trending_path(language: nil, license: params[:license]) %>
                <% else %>
                  <%= link_to format_language(language[0]), trending_path(language: format_language(language[0]), license: params[:license]) %>
                  <small><%= pluralize number_to_human(language[1]), 'repos' %></small>
                <% end %>
              </li>
            <% end %>
            <% if @language && !@languages.map{|l| l[0].downcase }.include?(@language.name.downcase) %>
              <li class='active'>
                <%= link_to format_language(@language.name), trending_path(language: nil, license: params[:license]) %>
              </li>
            <% end %>
          </ul>
        </div>
      <% end %>
    </div>
  </div>
</div>
